<template>
	<view class="add-car">
		<view class="top flex-between">
			<view class="">请输入您的车牌</view>
			<view @click="changeNewEnergy" style="color: #BEBEBE; font-size: 28rpx;">新能源</view>
		</view>
		
		<view class="license-plate flex-center" :class="{ 'new-energy': isNewEnergy }" @click="show = true">
			<!-- <view
				v-for="i in (count + 1)"
				:key="i"
				class="item"
				:class="{ dot: i === 2, current: i !== 2 && (i < 2 ? i : i - 1) === value.length }"
			>
				{{ i === 2 ? '·' : (value[i < 2 ? i : i - 1] || '') }}
			</view> -->
			<view
				v-for="i in count"
				:key="i"
				class="item"
				:class="{ current: (i < 2 ? i : i ) === value.length }"
			>
				{{ (value[i < 2 ? i : i ] || '')  }}
			</view>
		</view>
		
		<view class="flex-align">
			<view style="margin-right: 40rpx;">设为默认车辆</view>
			<u-switch v-model="checked" size="20" activeColor="#69D19B" @change="change"></u-switch>
		</view>
		
		<view class="bottom-add-btn">
			<u-button text="绑定车牌" :disabled="value.length !== count" shape="circle" @click="add" color=" linear-gradient( 270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%)"></u-button>	
		</view>
		
		<u-keyboard mode="car" :show="show" @change="valChange" @backspace="backspace" @close="show = false" autoChange :tooltip="false"></u-keyboard>
	</view>
</template>

<script>
	const index = require("@/api/index/index.js");
export default {
	data() {
		return {
			value: '',
			show: false,
			isNewEnergy: false,		// 是否新能源
			checked: false,
			plate_type:1,
		}
	},
	computed: {
		count() {
			if (this.isNewEnergy) {
				return 8; // 新能源8位
			}
			return 7; // 其他7位
		}
	},
	methods: {
		async add() {
			let that = this
			// 新能源plate_type2  油车1
			if (this.isNewEnergy == false) {
				this.plate_type = 1
			} else{
				this.plate_type = 2
			}
			if (this.checked == false) {
				this.is_default = 0
			} else{
				this.is_default = 1
			}
			let data = {
				open_id: uni.getStorageSync('openid'),
				plate_no: this.value,
				plate_type: this.plate_type,
				is_default: this.is_default,
			}
			let result = await index.platesub(data)
			if (result.code == 1) {
				uni.showToast({
					title: result.info,
					icon: 'success',
					mask: true
				})
				uni.navigateBack()
			}
		},
		// 按键被点击(点击退格键不会触发此事件)
		valChange(val) {
			if (this.value.length < this.count) {
				this.value += val;
			}
			
			if (this.value.length === this.count) {
				this.show = false;
			}
		},
		// 退格键被点击
		backspace() {
			// 删除value的最后一个字符
			if (this.value.length) {
				this.value = this.value.substr(0, this.value.length - 1)
			};
		},
		changeNewEnergy() {
			this.isNewEnergy = !this.isNewEnergy;
			this.value = this.value.slice(0, this.count);
		},
		change(e) {
			this.checked = e
		},
	}
}
</script>

<style lang="scss" scoped>
	.bottom-add-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		z-index: 1;
	}
.add-car {
	padding: 30rpx;
	
	.license-plate {
		margin-top: 43rpx;
		margin-bottom: 40rpx;
		color: #000000;
		font-size: 64rpx;
		border-radius: 16rpx;
		height: 127rpx;
		background-color: #ffffff;
		position: relative;
		text-align: center;
		
		&.new-energy {
			background-color: #ffffff;
		}
			
		&::before {
			content: '';
			position: absolute;
			left: 9rpx;
			right: 9rpx;
			top: 9rpx;
			bottom: 9rpx;
			border-radius: 8rpx;
			border: 1px solid #000000;
		}
		
		.item {
			margin: 0 4rpx;
			width: 70rpx;
			height: 84rpx;
			background-color: #e3e3e3;
			
			&.dot {
				width: 8rpx;
				margin: 0;
			}
			
			&.current {
				border-bottom: 4rpx solid #fff;
				animation: flash 1s infinite steps(1, start);
			}
			
			@keyframes flash {
				0%,
				100%{
					border-color: #000000;
				}
				
				50% {
					border-color: transparent;
				}
			}
		}
	}
}
</style>
